import React from 'react';
import PropTypes from 'prop-types';
import RobotPop from 'components/robotPop';
import { setIntroPointState } from 'api';
import { navigate } from 'utils/router';
import track from 'utils/track';
import './index.scss';
import intl from '../../../../../locale';

const key = 'robot_merge_request_guide';

export default class MergeRequestGuide extends React.Component {
  static propTypes = {
    onClickCancel: PropTypes.func,
  };

  static defaultProps = {
    onClickCancel: () => {},
  };

  state = {
    close: null,
    hideYundou: null,
  };

  handleCloseGuide = () => {
    const { hideYundou } = this.state;
    track({
      action: 'n_yundou',
      page: '',
      type: 'create mr',
      control: '',
    });

    this.setState({
      close: true,
    });

    this.props.onClickCancel(hideYundou);
    setIntroPointState(key, {
      project_id: window.FORCE.pathResource.id,
    })
      .then(() => {})
      .catch((err) => {
        console.log(err);
      });
  };

  handleOk = () => {
    track({
      action: 'y_yundou',
      page: '',
      type: 'create mr',
      control: '',
    });

    setIntroPointState(key, {
      project_id: window.FORCE.pathResource.id,
    })
      .then(() => {})
      .catch((err) => {
        console.log(err);
      });

    this.setState({
      close: true,
    });

    navigate(
      `${window.location.origin}/${window.FORCE.pathResource.fullPath}/merge_requests?create_mr=true`,
    );
  };

  render() {
    const { close } = this.state;
    const { isEmpty } = window.FORCE.pathResource;

    if (isEmpty === 'true') {
      return null;
    }

    return (
      <div
        ref={(ref) => {
          this.guide = ref;
        }}
      >
        <RobotPop
          componentType="Lead"
          close={close}
          introPointKey={key}
          introPointType={{ projectId: window.FORCE.pathResource.id }}
          content={
            <div>
              {intl.get({
                id: 'code-assets.robotGuides.mergeRequestGuide.ThereAreALotOf',
                defaultMessage: '有很多新提交啦，试试使用',
              })}
              <span style={{ fontWeight: 700 }}>
                {intl.get({
                  id: 'code-assets.robotGuides.mergeRequestGuide.MergeRequest',
                  defaultMessage: '【合并请求】',
                })}
              </span>
              {intl.get({
                id: 'code-assets.robotGuides.mergeRequestGuide.CreateCodeReviewAndAlso',
                defaultMessage: '创建代码评审吧，还支持代码安全和质量检测哦 :P',
              })}
            </div>
          }
          okText={intl.get({
            id: 'code-assets.robotGuides.mergeRequestGuide.YCreateMergeRequest',
            defaultMessage: '创建合并请求',
          })}
          closeText={intl.get({
            id: 'code-assets.robotGuides.mergeRequestGuide.NNoThankYou',
            defaultMessage: '不了，谢谢',
          })}
          onOk={this.handleOk}
          onClose={this.handleCloseGuide}
          shown={(hide) => {
            this.setState({
              hideYundou: hide,
            });
          }}
        />
      </div>
    );
  }
}
